<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beebud</title>
  <link rel="stylesheet" href="./css/detail.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="shortcut icon" href="./logo.png" type="image/x-icon">
  <script src="./js/vue.min.js"></script>

</head>

<body>
  <div id="app">
    <header>
      <div class="header-wrapper">
        <div class="logo"><a href="./index.html"><img src="./img/logo.png" alt=""></a>
        </div>
        <!--<div class="search-wrapper">-->
        <!--  <input type="text" placeholder="登录搜索更多内容">-->
        <!--  <?xml version="1.0" encoding="UTF-8"?><svg width="14" height="14" viewBox="0 0 48 48" fill="none"-->
        <!--    xmlns="http://www.w3.org/2000/svg">-->
        <!--    <path-->
        <!--      d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"-->
        <!--      fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />-->
        <!--    <path d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"-->
        <!--      stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />-->
        <!--    <path d="M33.2216 33.2217L41.7069 41.707" stroke="#000" stroke-width="4" stroke-linecap="round"-->
        <!--      stroke-linejoin="round" />-->
        <!--  </svg>-->
        <!--</div>-->
        <div class="nav-wrapper">
          <span><a href="./about.html">关于我们</a> </span>
          <span><a href="./concatUs.html">联系我们</a> </span>
          <span><a href="./help.html" class="help-a">服务与帮助</a> </span>
        </div>
        <div class="login-register">
          <span><a href="./register.html">注册</a></span>
          <button><a href="./login.html">登录</a></button>
        </div>
      </div>
    </header>
    <main>
      <div class="main-wrapper">
        <div class="title">
          <h3>
            {{info.title}}
          </h3>
        </div>
        <div class="title" style="margin-top:10px">
          <h4>
            收费标准：{{info.price/100}}元/{{info.unitText}}
          </h4>
        </div>
        <div class="title" style="margin-top:10px">
          <h4>
            服务区域：{{info.areaValue}}
          </h4>
        </div>
        <div class="user-info">
          <img :src="info.avatar" alt="" class="avatar">
          <div class="name">{{info.nickname}}</div>
          <div class="concat-user"><a href="./login.html">联系对方</a> </div>
        </div>
        <div class="address">
          <!-- 发布地址：上海 -->
        </div>
        <div class="address" style="margin-bottom: 20px;">
          发布时间：{{info.publishTime}}
        </div>
        <div v-html="info.content">
        </div>
        <div class="img-list">
          <img v-for="imgItem in info.imageList" :src="imgItem" :src="imgItem" alt="">
        </div>
        <div class="recommend">
          <h4 class="h4">相关推荐</h4>
          <ul class="beebud-list" v-if="list.length">
            <li v-for="item in list.slice(0, 3)">
              <img :src="item.imageList[0]" alt="">
              <div class="beebud-info">
                <div class="title">{{item.title}}</div>
                <div class="price">￥{{item.price/100}}元</div>
                <div class="user-info">
                  <img :src="item.avatar" alt="" class="avatar">
                  <div class="name">{{item.nickname}}</div>
                </div>
              </div>

            </li>
            <div class="fb"></div>
            <div class="fb"></div>
            <div class="fb"></div>
          </ul>
        </div>
      </div>
    </main>
    <footer>
      <div class="footer-wrapper">
        <div>
          <span>上海灼蕾网络科技有限公司</span>
          <span style="margin-left: 20px;"><a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
              rel="noopener noreferrer">沪ICP备2024048955号-1</a> </span>
        </div>

        <div>
          <span>地址：上海市奉贤区南桥镇西闸公路1036号3幢2层</span>
        </div>
      </div>
    </footer>
    <div class="beebud-modal-wrapper" v-if="concatShow" @click="concatShow = false">
      <div class="modal-body">
        <img src="./img/concatus.jpg" alt="">
      </div>
    </div>
  </div>
  <script src="./js/common.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          info: {},
          list: [],
          concatShow: false,
        }
      },
      mounted() {
        this.getList()
        this.getDetail()
      },
      methods: {
        async getDetail() {
          const res = await request('/web/detail', 'post', {
            id: getQueryVariable("id")
          });
          this.info = res.data
        },
        async getList(labelId) {
          const res = await request('/web/getList', 'post', {
            labelId
          });
          this.list = res.data
        },
      }
    })
  </script>
</body>

</html>